<template>
    <div class="errorpage" ref="bgstar" id="bgstar">
        <img :src="myImg" class="myimg" alt="">
        <div class="down" @click="gotowhere()">
            {{ count }}S倒计时
        </div>
        <span v-for="(item, index) in spanList" :key="index" class="spandot" :style="item">
        </span>


    </div>
</template>

<script lang="ts">
import Img from '@/assets/images/404.png'
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import { spanTypes } from '../../utils/types';
export default {
    setup(props, context) {
        const myImg = ref<string>(Img)
        const spanList = ref<Array<spanTypes>>([])
        const bgstar = ref()
        const count = ref<number>(5)
        const router = useRouter()
        let timer: any = null;
        const getSpanListInit = () => {
            let width = bgstar.value.clientWidth;
            let height = bgstar.value.clientHeight;
            for (var i = 0; i < 520; i++) {

                let left = Math.floor(Math.random() * width)
                let top = Math.floor(Math.random() * height)
                let scaler = (Math.random() * 1.5)
                let rate = (Math.random() * 2.5)

                let r = Math.random() * 255;
                let g = Math.random() * 255;
                let b = Math.random() * 255;
                let opacity = Math.random() * 1

                spanList.value.push({
                    left: left + 'px',
                    top: top + 'px',
                    transform: `scale(${scaler})`,
                    animationDelay: rate + 's',
                    background: `rgba(${r},${g},${b},${opacity})`,
                })
            }
        }

        const timeDown = () => {
            timer = setInterval(() => {
                if (count.value > 0) {
                    count.value--;
                } else {
                    clearInterval(timer)
                    timer = null;
                    gotowhere()
                }
            }, 1000)
        }

        onUnmounted(() => {
            clearInterval(timer)
            timer = null;
        })

        const gotowhere = () => {
            router.push('/login')
        }
        onMounted(() => {
            getSpanListInit()
            timeDown()
        })

        return {
            myImg,
            bgstar,
            spanList,
            count,
            gotowhere
        }
    }
}
</script>


<style lang="scss" scoped >
.errorpage {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    padding: 0 !important;
    overflow: hidden;

    .down {
        position: absolute;
        left: 20px;
        top: 20px;
        border: 1px solid #fff;
        color: #fff;
        width: 70px;
        height: 30px;
        border-radius: 10px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
    }

    .dao {
        position: absolute;
        top: 20px;
        right: 20px;

        ::v-deep .van-circle__text {
            color: #fff !important;
        }
    }

    .myimg {
        width: 270px;
        height: 270px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        z-index: 10;
    }

    .spandot {
        position: absolute;
        z-index: 100;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        animation: flash 3s infinite alternate;
    }

    @keyframes flash {
        from {
            opacity: 0;
        }

        to {
            opacity: 0.5;
        }
    }
}
</style>